<template>
  <div>
      <h5>
          招牌果品
      </h5>
      <div class="box" v-for="(v, i) in arr" :key="i">
      <a href="#"><img :src="v.urlimg" alt="" /></a>
      <div class="right">
        <p>
          <span> B级 </span>
          <span> {{ v.title }}</span>
        </p>
        <p>{{ v.save }}</p>
        <div class="jiage">
          <p>{{ v.jg }}</p>
          <p><img :src="v.uimg" alt="" /></p>
        </div>
        <button>选规格</button>
      </div>
    </div>
  </div>
</template>

<script>
import Eventbus from "@/eventbus"
export default {
  mounted(){
    Eventbus.$on("rexiao",(val)=>{
            console.log(val)
    })
  },
    data() {
    return {
      arr: [
        {
          title: "大芭猫山王(D197)榴莲（冷冻）中1个/约1.8kg",
          save: "不可用券",
          urlimg: require("@/assets/fenlei/o22.jpg"),
          jg: "￥352.9",
          uimg: require("@/assets/fenlei/xinxiang.png"),
        },
        {
          title: "孔雀河畔香梨(中)1份/约1.1kg",
          save: "细皮嫩肉的小甜心",
          urlimg: require("@/assets/fenlei/o33.jpg"),
          jg: "￥352.9",
          uimg: require("@/assets/fenlei/xinxiang.png"),
        },
        {
          title: "丝蒂冷冻榴莲肉(金枕) 1盒/约260g",
          save: "果肉肥厚绵甜，冰淇淋口感",
          urlimg: require("@/assets/fenlei/o44.jpg"),
          jg: "￥57",
          uimg: require("@/assets/fenlei/xinxiang.png"),
        },
      ]
    };
    },
};
</script>

<style scoped>
    div{
        box-sizing: border-box;
    }
    h5{
        width: 94.8%;
        height: .25rem;
        line-height: .25rem;
        padding-left: .15rem;
        display: inline-block;
        border-top: 1px solid rgba(128, 128, 128, 0.281);
        border-bottom: 1px solid rgba(128, 128, 128, 0.281);
    }
    .box {
  height: 1.25rem;
  position: relative;
}
.box a > img {
  margin-top: 0.1rem;
  margin-left: 0.05rem;
  width: 1rem;
}
.box .right {
  position: absolute;
  height: 1.2rem;
  right: 0.1rem;
  top: 0.1rem;
  border-bottom: 1px solid rgba(128, 128, 128, 0.281);
}
.box .right p:nth-child(1) {
  width: 1.6rem;
  font-size: 0.14rem;
}
.box .right p:nth-child(2) {
  font-size: 0.12rem;
  color: rgb(155, 155, 155);
}
.box .right button {
  display: inline-block;
  position: absolute;
  width: 0.6rem;
  height: 0.2rem;
  line-height: 0.2rem;
  right: 0.1rem;
  bottom: 0.13rem;
  color: white;
  border-radius: 0.18rem;
  outline: none;
  border: none;
  background: rgb(63, 170, 85);
}
.box .right .jiage {
  color: red;
  font-weight: 600;
  position: absolute;
  bottom: 0.13rem;
}
.box .right p img {
  width: 0.6rem;
}
</style>